<template>
  <el-container class="login-container">
    <el-main class="login-section">
      <el-tabs type="border-card">
        <el-tab-pane label="账号密码登录">
          <el-form ref="loginFromRef" :model="loginForm" :rules="loginRules">
            <el-form-item prop="username">
              <el-input
                placeholder="用户名"
                prefix-icon="el-icon-user"
                v-model="loginForm.username"
                clearable
              >
                <template #prefix>
                  <!--使用外部icon-->
                  <span class="svg-container">
                    <span class="svg-container">
                      <svg-icon
                        icon="https://res.lgdsunday.club/user.svg"
                      ></svg-icon>
                    </span>
                  </span>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                placeholder="密码"
                prefix-icon="el-icon-lock"
                type="password"
                v-model="loginForm.password"
                clearable
                show-password
              >
                <template #prefix>
                  <el-icon>
                    <Lock />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :loading="loading" @click="handlerLogin"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="验证码登录">
          <el-form>
            <el-form-item>
              <el-input
                placeholder="手机号"
                prefix-icon="el-icon-mobile"
                v-model="phone"
                clearable
              >
                <template #prefix
                  ><el-icon><Iphone /></el-icon
                ></template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                placeholder="验证码"
                prefix-icon="el-icon-message"
                v-model="code"
                clearable
              >
                <template #prefix>
                  <el-icon><Message /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary">登录</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="微信扫码登录">
          <div id="wechat-login"></div>
          <!-- 假设这是微信扫码的容器 -->
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import SvgIcon from '@/components/Svgicon/IndexView.vue'
import { validatePassword } from '@/util/validata'
import useStore from 'vuex'

const loginForm = ref({
  username: 'kptadmin',
  password: 'kptadmin123',
})

const loginRules = ref({
  username: [
    {
      required: true,
      trigger: 'blur',
      message: '用户名称不能为空',
    },
  ],
  password: [
    {
      required: true,
      trigger: 'blur',
      validator: validatePassword(),
    },
  ],
})

const loading = ref(false)
const store = useStore()
const loginFormRef = ref(null)
const handlerLogin = () => {
  // 1. 进行表达校验
  loginFormRef.value.validate((valid) => {
    if (!valid) return
    loading.value = true
    store
      .dispatch('user/login', loginForm.value)
      .then(() => {
        loading.value = false
      })
      .catch((err) => {
        loading.value = false
        console.log('login-err:', err)
      })
  })
  // 2. 触发登录动作
  // 3. 进行登录后处理
}

onMounted(() => {
  console.log(process.env.VUE_APP_BASE_API)
})

const phone = ref('')
const code = ref('')

// 微信扫码登录的逻辑这里省略，需要集成微信SDK
</script>

<style scoped lang="scss">
.login-container {
  background-image: url('~@/assets/login.png');
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100vh;
  background-size: cover;
}

.login-section {
  width: 100%;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 10px;
}
</style>
